import React, { FC, lazy, Suspense } from 'react'
import { BrowserRouter as History, HashRouter as Hash, useRoutes, Navigate } from 'react-router-dom'
import Loading from '../components/Loading';
import { AppRoutes } from './App/route';
import { ErrorRoutes } from './Errors/route';
import { GoodRoutes } from './Good/route';
import { LoginRoutes } from './Logins/route';
import { MyRoutes } from './My/route';

const Guide = lazy(() => import('../views/Guide/Guide'))
const City = lazy(() => import('../views/City/City'))
const Search = lazy(() => import('../views/Search/search'))



const AllLayout: FC = () => {
    return (
        <Hash>
            <Suspense fallback={
                <Loading />
            }>
                <MyAllRouter></MyAllRouter>
            </Suspense>
        </Hash>
    )
}


const MyAllRouter: FC = () => {
    return useRoutes([
        {
            path: "/",
            element: <Navigate to='/guide' />
        },
        {
            path: "/guide",
            element: <Guide />
        },
        {
            path: "/city",
            element: <City />
        },
        {
            path: "/search",
            element: <Search />
        },
        ...LoginRoutes,
        ...ErrorRoutes,
        ...AppRoutes,
        ...GoodRoutes,
        ...MyRoutes,
        {
            path: "*",
            element: <Navigate to="/404" />
        }
    ])
}

export default AllLayout